<template>
  <view>
    <view class="container">
      <uni-forms ref="form" :modelValue="formData" labelWidth="200px" labelPosition="top">
        <view class="background-white bor-top">
          <uni-forms-item name="accidentName" label="内（外）部事故事件名称">
            <textarea v-model="formData.accidentName" class="text-area" placeholder="请输入" maxlength="50" />
          </uni-forms-item>
        </view>
        <view class="background-white bor-top">
          <uni-forms-item name="enterpriseName" label="单位名称">
            <textarea v-model="formData.enterpriseName" class="text-area" placeholder="请输入" maxlength="20" />
          </uni-forms-item>
        </view>
        <cu-cell-group class="background-white bor-top">
          <uni-forms-item name="accidentType">
            <cu-cell
              title="事故类别"
              required
              link
              placeholder="请选择"
              :description="formData.accidentTypeLabel"
              @click="accidentTypeClick()"
            ></cu-cell>
          </uni-forms-item>

          <uni-forms-item name="accidentDeptId">
            <cu-cell
              title="事故发生部门"
              required
              link
              placeholder="请选择"
              :description="formData.accidentDeptLabel"
              @click="accidentDeptClick()"
            ></cu-cell>
          </uni-forms-item>
          <uni-forms-item name="accidentTime">
            <uni-datetime-picker v-model="formData.accidentTime" type="date">
              <cu-cell
                title="发生时间"
                required
                link
                placeholder="请选择"
                :description="formData.accidentTime"
              ></cu-cell>
            </uni-datetime-picker>
          </uni-forms-item>
        </cu-cell-group>
        <view class="background-white bor-top">
          <uni-forms-item name="accidentPlace" label="发生地点">
            <textarea v-model="formData.accidentPlace" class="text-area" placeholder="请输入" maxlength="20" />
          </uni-forms-item>
        </view>

        <view class="background-white bor-top">
          <view class="table-border">
            <view class="table-width1">伤亡统计</view>
            <view class="table-width2">人数</view>
            <view class="table-width2">损失工作日</view>
          </view>
          <view class="table-border">
            <view class="table-width1">死亡</view>
            <u-number-box
              class="table-width2"
              v-model="formData.deathCount"
              :min="0"
              bgColor="#fff"
              placeholder="请输入"
            ></u-number-box>
            <u-number-box
              class="table-width2"
              v-model="formData.deathWorkday"
              :min="0"
              bgColor="#fff"
              placeholder="请输入"
            ></u-number-box>
          </view>
          <view class="table-border">
            <view class="table-width1">重伤</view>
            <u-number-box
              class="table-width2"
              v-model="formData.seriouslyInjuredCount"
              :min="0"
              bgColor="#fff"
              placeholder="请输入"
            ></u-number-box>
            <u-number-box
              class="table-width2"
              v-model="formData.seriouslyInjuredWorkday"
              :min="0"
              bgColor="#fff"
              placeholder="请输入"
            ></u-number-box>
          </view>
          <view class="table-border">
            <view class="table-width1">轻伤</view>
            <u-number-box
              class="table-width2"
              v-model="formData.minorInjuredCount"
              :min="0"
              bgColor="#fff"
              placeholder="请输入"
            ></u-number-box>
            <u-number-box
              class="table-width2"
              v-model="formData.minorInjuredWorkday"
              :min="0"
              bgColor="#fff"
              placeholder="请输入"
            ></u-number-box>
          </view>
          <view class="table-border">
            <view class="table-width1">轻微伤</view>
            <u-number-box
              class="table-width2"
              v-model="formData.slightInjuredCount"
              :min="0"
              bgColor="#fff"
              placeholder="请输入"
            ></u-number-box>
            <u-number-box
              class="table-width2"
              v-model="formData.slightInjuredWorkday"
              :min="0"
              bgColor="#fff"
              placeholder="请输入"
            ></u-number-box>
          </view>
        </view>

        <view class="background-white bor-top">
          <uni-forms-item name="accidentProcess" label="事故经过">
            <textarea v-model="formData.accidentProcess" class="text-area" placeholder="请输入" maxlength="500" />
          </uni-forms-item>
        </view>
        <view class="background-white bor-top">
          <uni-forms-item name="accidentCause" label="事故原因初步分析">
            <textarea v-model="formData.accidentCause" class="text-area" placeholder="请输入" maxlength="500" />
          </uni-forms-item>
        </view>
        <view class="background-white bor-top" style="margin-bottom: 150rpx">
          <uni-forms-item name="preventiveMeasure" label="防范措施">
            <textarea v-model="formData.preventiveMeasure" class="text-area" placeholder="请输入" maxlength="500" />
          </uni-forms-item>
        </view>
      </uni-forms>
      <DictPicker
        ref="accidentTypeDict"
        title="隐患类型"
        dictType="emb_accident_type"
        @confirm="accidentTypeOnConfirm"
      ></DictPicker>
      <DeptSelector ref="deptSelectorRef" @change="deptSelectorChange"></DeptSelector>
    </view>
    <view class="submit-group">
      <button class="u-button" :loading="loading" type="primary" :ripple="true" @click="submit">提交</button>
    </view>
  </view>
</template>

<script>
import { accidentReportAdd } from '@/api/dbd/add-accident-report'
import CuCellGroup from '@/components/cu-cell/cu-cell-group.vue'
import CuCell from '@/components/cu-cell/cu-cell.vue'
import DictPicker from '@/components/dict-picker/index.vue'
import DeptSelector from '@/components/dept-selector/index'

export default {
  components: {
    CuCellGroup,
    CuCell,
    DictPicker,
    DeptSelector
  },
  data() {
    return {
      formData: {
        accidentName: '',
        accidentType: '',
        accidentTypeLabel: '',
        enterpriseName: '',
        accidentDeptId: '',
        accidentDeptLabel: '',
        accidentTime: '',
        accidentPlace: '',
        deathCount: 0,
        seriouslyInjuredCount: 0,
        minorInjuredCount: 0,
        slightInjuredCount: 0,
        deathWorkday: 0,
        seriouslyInjuredWorkday: 0,
        minorInjuredWorkday: 0,
        slightInjuredWorkday: 0,
        accidentProcess: '',
        accidentCause: '',
        preventiveMeasure: ''
      },
      loading: false,
      show: false,
      rules: {
        accidentName: {
          rules: [
            {
              required: true,
              errorMessage: '必填项不能为空'
            }
          ]
        },
        enterpriseName: {
          rules: [
            {
              required: true,
              errorMessage: '必填项不能为空'
            }
          ]
        },
        accidentPlace: {
          rules: [
            {
              required: true,
              errorMessage: '必填项不能为空'
            }
          ]
        },
        accidentProcess: {
          rules: [
            {
              required: true,
              errorMessage: '必填项不能为空'
            }
          ]
        },
        accidentCause: {
          rules: [
            {
              required: true,
              errorMessage: '必填项不能为空'
            }
          ]
        },
        preventiveMeasure: {
          rules: [
            {
              required: true,
              errorMessage: '必填项不能为空'
            }
          ]
        },
        accidentType: {
          rules: [
            {
              required: true,
              errorMessage: '必填项不能为空'
            }
          ]
        },
        accidentDeptId: {
          rules: [
            {
              required: true,
              errorMessage: '必填项不能为空'
            }
          ]
        },
        accidentTime: {
          rules: [
            {
              required: true,
              errorMessage: '必填项不能为空'
            }
          ]
        }
      }
    }
  },
  onReady() {
    this.$refs.form.setRules(this.rules)
  },
  methods: {
    accidentTypeClick() {
      this.$refs.accidentTypeDict.open()
    },
    accidentDeptClick() {
      this.$refs.deptSelectorRef.open()
    },
    accidentTypeOnConfirm(obj) {
      this.formData.accidentTypeLabel = obj.name
      this.formData.accidentType = obj.value
    },
    deptSelectorChange(item) {
      this.formData.accidentDeptId = item.value
      this.formData.accidentDeptLabel = item.name
    },
    submit() {
      this.$refs.form.validate().then(() => {
        this.$modal.confirm('确定提交吗？').then(async () => {
          this.loading = true
          await accidentReportAdd(this.formData)
          this.loading = false
          uni.switchTab({
            url: '/pages/work/index'
          })
          this.$modal.showToast('上报成功')
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  .background-white {
    background-color: #fff;
    padding: 20rpx 30rpx;
    box-sizing: border-box;

    .uni-forms-item__label {
      color: #333;
      font-size: 30rpx;
    }

    .bor-btm {
      display: flex;
      border-bottom: 1px solid #d5d7e3;
    }
  }
}

.table-border {
  display: flex;
  padding: 6px 0;
  border-bottom: 1px solid #d5d7e3;
}

.table-width1 {
  display: flex;
  width: 20%;
  text-align: center;
  align-items: center;
}

.table-width2 {
  justify-content: center;
  width: 40%;
  text-align: center;
  margin: 0 auto;
}
</style>
